<template>
  <!-- 个人中心页面 -->
  <div class="personal">
    <router-link :to="'/edit_profile/' + user.id">
      <div class="profile">
        <img :src="user.head_img" alt />
        <div class="profile-center">
          <div class="name">
            <span
              class="iconfont"
              :class="{
                iconxingbienan: user.gender == 1,
                iconxingbienv: user.gender != 1,
                pink: user.gender != 1,
              }"
            ></span
            >{{ user.nickname }}
          </div>
          <div class="time">{{ user.create_date | getDate("-") }}</div>
          <!-- <div class="time">{{ user.create_date.substr(0, 10) }}</div> -->
        </div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </router-link>
    <mycell
      title="我的关注"
      particulars="关注的用户"
      @click="$router.push({ path: '/userFollow/' + $route.params.id })"
    ></mycell>
    <mycell title="我的跟帖" particulars="跟帖/回复"></mycell>
    <mycell title="我的收藏" particulars="文章/视频" @click="mystars"></mycell>
    <mycell title="我的关注" particulars=""></mycell>
    <mybutton class="btn_exit" res="danger" @click="exit_login"
      >退出登录</mybutton
    >
  </div>
</template>

<script>
import mybutton from "@/components/mybuttom";
import { userData } from "@/apis/user";
import mycell from "@/components/mycell";
import axios from "@/utils/myaxios";
import { getDate } from "@/filter/myfilter";
export default {
  components: {
    mycell,
    mybutton,
  },
  data() {
    return {
      user: {},
    };
  },
  methods: {
    // 点击我的收藏事件跳转
    mystars() {
      this.$router.push({ path: `/userStars/${this.$route.params.id}` });
    },
    exit_login() {
      // // 1.删除token/id
      window.localStorage.removeItem("toutiao_token");
      window.localStorage.removeItem("toutiao_user");
      // window.localStorage.removeItem("toutiao");
      // 返回首页
      this.$router.push({ path: "/index" });
    },
  },
  async mounted() {
    // 页面渲染之前要得到用户数据
    // console.log(this);
    // console.log(this.$route.params.id); // 先得到url传过来的值
    let id = this.$route.params.id;
    let res = await userData(id);
    // console.log(res);
    this.user = res.data.data;
    // 判断用户是否有图片，没有的给个默认图片
    if (this.user.head_img) {
      // console.log(1);
      axios.defaults.baseURL + this.user.head_img;
    } else {
      this.user.head_img =
        axios.defaults.baseURL + "/uploads/image/default.jpeg"; //基准路径，加默认图片地址
      // console.log(this.user);
    }
  },
  // 过滤器过滤页面显示的
  filters: {
    // 这个我们要全局使用这个过滤器
    getDate,
    // getDate(value, spa = "-") {
    //   value = new Date(value);
    //   // console.log(value);
    //   // return value.split("T")[0];
    //   let year = value.getFullYear();
    //   let month = value.getMonth() + 1;
    //   let day = value.getDate();
    //   return `${year}${spa}${month}${spa}${day}`;
    // },
  },
};
</script>

<style lang="less" scoped>
.personal {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
a {
  color: #666;
}
.profile {
  display: flex;
  padding: 20px 10px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 5px #ddd solid;

  img {
    width: 70 / 360 * 100vw;
    height: 70 / 360 * 100vw;
    border-radius: 50%;
  }

  .profile-center {
    flex: 1;
    padding: 0 10px;
  }

  .name {
    span {
      color: #75b9eb;
    }
    .pink {
      color: pink;
    }
  }

  .time {
    color: #666;
    font-size: 14px;
    margin-top: 5px;
  }
}
.btn_exit {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>